<template>
  <div class="addDoctor">
    <div class="container">
      <Form ref="formValidate" :model="formValidate" :label-width="40" label-position="left" :rules="ruleValidate">
        <Row>
          <Col span="24" class="left-part">
            <h2 class="title">基本信息</h2>
            <Row style="margin: 0 15px" :gutter="32">
              <Col
                span="24"
                class="upload-wrapper baseInfo-lineOne"
                style="margin: 20px 0; margin-bottom: 30px"
              >
                <label>头像：</label>
                <div class="upload-part" style="margin-top: 20px;width:120px">
                  <div class="demo-upload-list" v-for="(item, index) in uploadListAvatar" :key="index" >
                    <template v-if="mode !== 'review'">
                      <div v-if="item.status === 'finished'">
                        <img :src="fileBaseUrl + item.res.fileName" />
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline"  @click.native="handleView(item)" ></Icon>
                          <Icon type="ios-trash-outline"  @click.native="onremove('Avatar', item)" ></Icon>
                        </div>
                      </div>
                      <div v-else>
                        <Progress :percent="item.percentage"  hide-info ></Progress>
                      </div>
                    </template>
                    <template v-else>
                      <div>
                        <img :src="fileBaseUrl + item.res.fileName" />
                        <div class="demo-upload-list-cover">
                          <Icon type="ios-eye-outline" @click.native="handleView(item)" ></Icon>
                        </div>
                      </div>
                    </template>
                  </div>
                  <Upload
                    v-show="uploadListAvatar.length ==0"
                    ref="uploadAvatar"
                    :headers="fromData"
                    :action="uploadUrl"
                    :default-file-list="defaultListAvatar"
                    :format="['jpg', 'jpeg', 'png']"
                    :on-format-error="uploadFormatErrorAvatar"
                    max-size="200"
                    :on-exceeded-size="handleMaxSize"
                    :before-upload="() => preview('Avatar')"
                    :data="uploadDataAvatar"
                    :on-success=" (res, file) => handleSuccess(res, file, 'Avatar') "
                    :show-upload-list="noshow" multiple type="drag" >
                    <div v-if="mode !== 'review'" style="width: 98px;height: 98px;line-height: 98px;">
                      <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                    </div>
                  </Upload>
                </div>
              </Col>
              <Col span="10">
                <!-- 所属医院 -->
                <!-- :mode="wyAccid && 'review'" -->
                <FormItem label="所属医院：" :label-width="60">
                  <fourLevelLinkage
                    v-if="mode !== 'review' && identity!='5'"
                    @changeProvince="changeProvince"
                    @changeCity="changeCity"
                    @changeArea="changeArea"
                    @changeHospital="changeHospital"

                    :province="Number(province)"
                    :city="Number(city)"
                    :area="Number(area)"
                    :hospital="formValidate.hospitalId"
                    :hospitalType="1"
                    ref="fourLevelLinkage"
                    style="100%"
                  ></fourLevelLinkage>
                  <div v-if="mode == 'review' && identity!='5'" class="content">
                    <span>{{($store.getters.getProvinceList.filter(item => item.id == province)[0] || {}).name}}</span>
                    <span>{{($store.getters.getCityList(province).filter(item => item.id == city)[0] || {}).name}}</span>
                    <span>{{($store.getters.getAreaList(city).filter(item => item.id == area)[0] || {}).name}}</span>
                    <span>{{hospitalName}}</span>
                  </div>
                  <div class="content"  v-if="identity=='5' ">
                      <span>{{provinceName}}</span>
                      <span>{{cityName}}</span>
                      <span>{{areaName}}</span>
                      <span>{{hospitalName}}</span>
                  </div>
                </FormItem>
                <!-- 医生姓名 -->
                <FormItem label="姓名：" prop="name" :label-width="50"  class="hongdian">
                  <Input v-if="mode !== 'review'" v-model="formValidate.name" placeholder="请输入姓名" style="width:100%" maxlength="15"></Input>
                  <div v-else class="content">{{formValidate.name}}</div>
                </FormItem>
                <!-- 联系方式 -->
                <FormItem label="手机号：" prop="phone" :label-width="60"  class="hongdian">
                  <Input v-if="mode !== 'review'" v-model="formValidate.phone" placeholder="请输联系方式" maxlength="11"></Input>
                  <div v-else class="content">{{formValidate.phone}}</div>
                </FormItem>
                <!-- 密码 -->
                <FormItem label="密码：" prop="password" :label-width="60"  class="hongdian">
                  <Input v-if="mode !== 'review'" v-model="formValidate.password" placeholder="请输入密码" maxlength="11"></Input>
                  <div v-else class="content">{{formValidate.password}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <!-- 科室 -->
                <FormItem label="科室：" prop="departmentId" :label-width="50" class="hongdian">
                  <Select
                    v-if="mode !== 'review'"
                    v-model="formValidate.departmentId"
                    :not-found-text="formValidate.hospitalId ? '该机构暂无科室信息' : '请先选择所属医院'"
                    placeholder="请选择科室"
                    @on-change="changedept"
                  >
                    <Option
                      v-for="item in departmentList"
                      :value="item.id"
                      :key="item.id"
                      style="text-align:center"
                    >{{ item.deptNickname }}</Option>
                  </Select>
                  <div v-else class="content">
                    {{(departmentList.filter((item) => formValidate.departmentId === item.id)[0] || {}).deptNickname}}
                    </div>
                  <!-- <div v-else class="content">{{(departmentList.filter((item) => formValidate.departmentId === item.id)[0] || {}).deptNickname}}</div> -->
                </FormItem>
                <!-- 身份证号 -->
                <FormItem label="身份证号：" prop="idcard" :label-width="75" class="hongdian">
                  <Input v-if="mode !== 'review'" v-model="formValidate.idcard" placeholder="请输入身份证号" maxlength="18"></Input>
                  <div v-else class="content">{{formValidate.idcard}}</div>
                </FormItem>
                <!-- 民族 -->
                <FormItem label="民族：" prop="民族" :label-width="40">
                  <Select v-if="mode !== 'review'" v-model="formValidate.nation" placeholder="请选择民族">
                    <Option
                      v-for="item in nationalityList"
                      :value="item.dictValue"
                      :key="item.dictName"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div v-else class="content">{{(nationalityList.filter((item) => formValidate.nation === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
              </Col>
              <Col span="7">
              <!-- 医生职称 -->
                <FormItem :label=roleTitle  prop="title" :label-width="75" class="hongdian">
                  <Select v-if="mode !== 'review'" v-model="formValidate.title" placeholder="请选择职称">
                    <Option
                      v-for="item in titleList"
                      :value="item.dictType"
                      :key="item.dictType"
                      style="text-align:center"
                    >{{item.dictName}}</Option>
                  </Select>
                  <div v-else class="content">{{(titleList.filter((item) => formValidate.title === item.dictType)[0] || {}).dictName}}</div>
                </FormItem>
                <!-- 性别 -->
                <FormItem label="性别：" prop="gender" :label-width="50" class="hongdian">
                  <RadioGroup v-if="mode !== 'review'" v-model="formValidate.gender">
                    <Radio :value="1" :label="1">男</Radio>
                    <Radio :value="2" :label="2">女</Radio>
                  </RadioGroup>
                  <div v-else class="content">{{['', '男', '女'][formValidate.gender]}}</div>
                </FormItem>
                <!-- 籍贯 -->
                <FormItem label="籍贯：">
                  <Input v-if="mode !== 'review'" v-model="formValidate.nativePlace" placeholder="请输入籍贯" maxlength="100"></Input>
                  <div v-else class="content">{{formValidate.nativePlace}}</div>
                </FormItem>
              </Col>
              <Col span="17">
                <!-- 住址 -->
                <FormItem label="详细地址：" :label-width="60">
                  <Input v-if="mode !== 'review'" v-model="formValidate.address" placeholder="请输入住址" maxlength="100"></Input>
                  <div v-else class="content">{{formValidate.address}}</div>
                </FormItem>
              </Col>
              <Col span="7">
              <!-- 所在医院 -->
              <FormItem label="HIS编码：" prop="hiscode" :label-width="68" class="hongdian">
                <Input v-if="mode !== 'review'" v-model="formValidate.hiscode" placeholder="请输入HIS编码" style="width:67%" maxlength="100"></Input>
                <div v-else style="width:100%;display: inline-block;word-wrap:break-word;">{{formValidate.hiscode}}</div>
                <Button type="primary" @click="changeDoctor(1)" style="margin-left:10px" v-if="mode !== 'review'">HIS编码</Button>
              </FormItem>
            </Col>
              <Col span="10">
                <!-- 最高学历 -->
                <FormItem label="最高学历：" :label-width="60" style="width:50%">
                  <Select v-if="mode !== 'review'" v-model="formValidate.highestEducation" placeholder="请选择最高学历">
                    <Option
                      v-for="item in educationList"
                      :value="item.dictValue"
                      :key="item.dictValue"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div v-else class="content">{{(educationList.filter((item) => formValidate.highestEducation === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
                <!-- 专业 -->
                <FormItem label="专业：" style="width:50%">
                    <Select v-if="mode !== 'review'" v-model="formValidate.major" placeholder="请选择专业">
                      <Option
                        v-for="item in majorList"
                        :value="item.dictValue"
                        :key="item.dictValue"
                        style="text-align:center"
                      >{{ item.dictName }}</Option>
                    </Select>
                    <div v-else class="content">{{formValidate.major}}</div>
                  </FormItem>
              </Col>
              <Col span="7">
                <!-- 手机号 -->
                <FormItem label="毕业时间：" :label-width="60">
                  <DatePicker
                    v-if="mode !== 'review'"
                    type="date"
                    v-model="formValidate.graduationTime"
                    placeholder="请选择毕业时间"
                  ></DatePicker>
                  <div v-else class="content">{{formValidate.graduationTime}}</div>
                </FormItem>
                <!-- 学位 -->
                <FormItem label="学位：">
                  <Select v-if="mode !== 'review'" v-model="formValidate.degree" placeholder="请选择学位">
                    <Option
                      v-for="item in degreeList"
                      :value="item.dictValue"
                      :key="item.dictValue"
                      style="text-align:center"
                    >{{ item.dictName }}</Option>
                  </Select>
                  <div v-else class="content">{{(degreeList.filter((item) => formValidate.degree === item.dictValue)[0] || {}).dictName}}</div>
                </FormItem>
              </Col>
              <Col span="7">
                <!-- 联系方式 -->
                <FormItem label="毕业学校：" :label-width="60">
                  <Input v-if="mode !== 'review'" v-model="formValidate.graduateSchool" placeholder="请输入毕业学校" maxlength="100"></Input>
                  <div v-else class="content">{{formValidate.graduateSchool}}</div>
                </FormItem>
                <!-- 毕业证号 -->
                <FormItem label="毕业证号：" :label-width="60">
                  <Input v-if="mode !== 'review'" v-model="formValidate.graduationCard" placeholder="请输入毕业证号" maxlength="30"></Input>
                  <div v-else class="content">{{formValidate.graduationCard}}</div>
                </FormItem>
              </Col>
            </Row>
          </Col>
          <Col span="24" class="right-part">
            <h2 class="title">
              资质信息
              <span class="tishi">(注意：图片只能上传jpg格式，且文件大小不超过200KB)</span>
            </h2>
            <Row style="margin: 0 15px" :gutter="32">
              <Col span="8">
                <div class="type1">
                  <div style="font-weight:550;margin:10px 0;">
                    <span style="color:red">*</span>
                    {{roleName}}资格证书：
                  </div>
                    <Row style="margin-left:25px">
                      <Col span="24">
                        <!-- 证书编号 :rules="{required: true, message: '请填写证书编号', trigger: 'blur'}" -->
                        <FormItem
                          label="证书编号："
                          :prop="'certList.' + getItemIndexByType('1') + '.code'"
                          
                          :label-width="75"
                          class="hongdian"
                        >
                          <Input v-if="mode !== 'review'" v-model="getItemByType('1').code" placeholder="请输入证书编号" maxlength="50"></Input>
                          <div v-else class="content">{{getItemByType('1').code}}</div>
                        </FormItem>
                      </Col>
                      <Col span="24">
                        <!-- 发证日期 -->
                        <FormItem label="发证日期：" :label-width="60">
                          <DatePicker
                            v-if="mode !== 'review'"
                            style="width: 100%;"
                            type="date"
                            v-model="getItemByType('1').details1"
                            placeholder="请选择发证日期"
                          ></DatePicker>
                          <div v-else class="content">{{getItemByType('1').details1?getItemByType('1').details1.substring(0,10):''}}</div>
                        </FormItem>
                      </Col>
                      <!-- 专业 -->
                      <Col span="24">
                        <FormItem
                        label="专业：" :label-width="50"
                        :prop="'certList.' + getItemIndexByType('1') + '.details2'"
                        :rules="{required: true, message: '请选择专业', trigger: 'change'}" class="hongdian">
                          <Select v-if="mode !== 'review'" v-model="getItemByType('1').details2" placeholder="请选择专业">
                            <Option
                              v-for="item in majorList"
                              :value="item.dictValue"
                              :key="item.dictValue"
                              style="text-align:center"
                            >{{ item.dictName }}</Option>
                          </Select>
                          <div v-else class="content">{{getItemByType('1').details2}}</div>
                        </FormItem>
                      </Col>
                      <div class="upload-wrapper">
                        <!-- <label style="width: 85px">证书图片：</label> -->
                        <div class="upload-part">
                          <div
                            class="demo-upload-list"
                            v-for="(item,index) in uploadList1"
                            :key="index"
                          >
                            <template v-if="mode !== 'review'">
                              <div v-if="item.status === 'finished'">
                                <img :src="fileBaseUrl + item.res.fileName" />
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                  <Icon type="ios-trash-outline" @click.native="onremove('1', item)"></Icon>
                                </div>
                              </div>
                              <div v-else>
                                <Progress :percent="item.percentage" hide-info></Progress>
                              </div>
                            </template>
                            <template v-else>
                              <div>
                                <img :src="fileBaseUrl + item.res.fileName" />
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                </div>
                              </div>
                            </template>
                          </div>

                          <Upload
                            v-show="uploadList1.length<3"
                            ref="upload1"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList1"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('1')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '1')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                          >
                            <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                          </Upload>
                        </div>
                      </div>
                    </Row>
                </div>
              </Col>
              <Col span="8">
                <div class="type2">
                  <div style="font-weight:550;margin:10px 0;">
                    <span style="color:red">*</span>
                    {{roleName}}执业证书：
                  </div>
                    <Row style="margin-left:25px">
                      <Col span="24">
                        <!-- 证书编号 :rules="{required: true, message: '请填写证书编号', trigger: 'blur'}" -->
                        <FormItem
                          label="证书编号："  :label-width="75"
                          :prop="'certList.' + getItemIndexByType('2') + '.code'"
                           class="hongdian">
                          <Input v-if="mode !== 'review'" v-model="getItemByType('2').code" placeholder="请输入证书编号" maxlength="50"></Input>
                          <div v-else class="content">{{getItemByType('2').code}}</div>
                        </FormItem>
                      </Col>
                      <Col span="24">
                        <!-- 发证日期 -->
                        <FormItem label="发证日期：" :label-width="60">
                          <DatePicker
                            v-if="mode !== 'review'"
                            style="width: 50%;"
                            type="date"
                            v-model="getItemByType('2').details1"
                            placeholder="请选择发证日期"
                            :label-width="60"
                          ></DatePicker>
                          <div v-else class="content">{{getItemByType('2').details1?getItemByType('2').details1.substring(0,10):''}}</div>
                        </FormItem>
                      </Col>
                      <div class="upload-wrapper">
                        <!-- <label style="width: 85px">证书图片：</label> -->
                        <div class="upload-part">
                          <div
                            class="demo-upload-list"
                            v-for="(item,index) in uploadList2"
                            :key="index"
                          >
                            <template v-if="mode !== 'review'">
                              <div v-if="item.status === 'finished'">
                                <img :src="fileBaseUrl + item.res.fileName" />
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                  <Icon type="ios-trash-outline" @click.native="onremove('2', item)"></Icon>
                                </div>
                              </div>
                              <div v-else>
                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                              </div>
                            </template>
                            <template v-else>
                              <div>
                                <img :src="fileBaseUrl + item.res.fileName" />
                                <div class="demo-upload-list-cover">
                                  <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                                </div>
                              </div>
                            </template>
                          </div>
                          <Upload
                            v-show="uploadList2.length <3"
                            ref="upload2"
                            :headers="fromData"
                            :action="uploadUrl"
                            :default-file-list="defaultList2"
                            :format="['jpg']"
                            :on-format-error="uploadFormatError"
                            max-size="200"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="() => preview('2')"
                            :data="uploadData"
                            :on-success="(res, file) => handleSuccess(res, file, '2')"
                            :show-upload-list="noshow"
                            multiple
                            type="drag"
                          >
                            <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                                <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                            </div>
                          </Upload>
                        </div>
                      </div>
                    </Row>
                </div>
              </Col>
              <Col span="8">
                <div class="type3">
                  <div style="font-weight:550;margin:10px 0;">
                    <!-- <span style="color:red">*</span> -->
                    其他证书：
                  </div>
                  <Col style="margin-left:25px">
                    <!-- <FormItem> -->
                      <Input
                        v-if="mode !== 'review'"
                        v-model="getItemByType('3').code"
                        type="textarea"
                        :autosize="{minRows: 2,maxRows: 5}"
                        placeholder="请输入其他证书说明"
                        maxlength="50"
                      ></Input>
                      <div v-else class="content">{{getItemByType('3').code}}</div>
                    <!-- </FormItem> -->
                  </Col>
                  <div class="upload-wrapper" style="margin-top:20px;margin-left:15px">
                    <!-- <label style="width: 85px">证书图片：</label> -->
                    <div class="upload-part">
                      <div class="demo-upload-list" v-for="(item,index) in uploadList3" :key="index">
                        <template v-if="mode !== 'review'">
                          <div v-if="item.status === 'finished'">
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                              <Icon type="ios-trash-outline" @click.native="onremove('3', item)"></Icon>
                            </div>
                          </div>
                          <div v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                          </div>
                        </template>
                        <template v-else>
                          <div>
                            <img :src="fileBaseUrl + item.res.fileName" />
                            <div class="demo-upload-list-cover">
                              <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
                            </div>
                          </div>
                        </template>
                      </div>
                      <Upload
                        v-show="uploadList3.length <3"
                        ref="upload3"
                        :headers="fromData"
                        :action="uploadUrl"
                        :default-file-list="defaultList3"
                        :format="['jpg']"
                        :on-format-error="uploadFormatError"
                        max-size="200"
                        :on-exceeded-size="handleMaxSize"
                        :before-upload="() => preview('3')"
                        :data="uploadData"
                        :on-success="(res, file) => handleSuccess(res, file, '3')"
                        :show-upload-list="noshow"
                        multiple
                        type="drag"
                      >
                        <div v-if="mode !== 'review'" style="width: 90px;height:90px;line-height: 90px;">
                            <i class = "iconfont icon-shangchuan" style="font-size:36px;"></i>
                        </div>
                      </Upload>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </Col>
          <Col span="24" class="left-part">
            <h2 class="title">{{roleName}}简介</h2>
            <Row style="margin: 0 35px">
              <Col span="24">
                <!-- 医生擅长 -->
                <div style="font-weight:550;margin-bottom:10px;">
                  {{roleName}}擅长：
                </div>
                <FormItem style="margin-bottom:15px">
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.doctorGood"
                    type="textarea"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder="请输入擅长信息，便于平台推荐。"
                    maxlength="500" show-word-limit
                  ></Input>
                  <div v-else class="content">{{formValidate.doctorGood}}</div>
                </FormItem>
              </Col>
              <Col span="24">
                <!-- 医生简介 -->
                <div style="font-weight:550;margin-bottom:10px;">
                  个人简介：
                </div>
                <FormItem>
                  <Input
                    v-if="mode !== 'review'"
                    v-model="formValidate.personalIntroduction"
                    type="textarea"
                    :autosize="{minRows: 2,maxRows: 5}"
                    placeholder="请输入简介信息，便于平台推荐。"
                    maxlength="1000" show-word-limit
                  ></Input>
                  <div v-else class="content">{{formValidate.personalIntroduction}}</div>
                </FormItem>
              </Col>
<!--              <Col span="24">-->
<!--                &lt;!&ndash; 医生擅长 &ndash;&gt;-->
<!--                <div style="font-weight:550;margin-bottom:10px;">-->
<!--                  医生擅长：-->
<!--                </div>-->
<!--                <FormItem>-->
<!--                  <Input-->
<!--                    v-if="mode !== 'review'"-->
<!--                    v-model="formValidate.doctorGoodDisease"-->
<!--                    type="textarea"-->
<!--                    :autosize="{minRows: 2,maxRows: 5}"-->
<!--                    placeholder="擅长疾病用逗号分割"-->
<!--                    maxlength="1000" show-word-limit-->
<!--                  ></Input>-->
<!--                  <div v-else class="content">{{formValidate.doctorGoodDisease}}</div>-->
<!--                </FormItem>-->
<!--              </Col>-->
            </Row>
          </Col>
        </Row>
      </Form>
      <!-- 添加医生 -->
      <div class="btn-group">
        <Button type="primary" v-if="mode === 'add'" :loading="btnLoading" @click="handleConfirm('add')" :disabled='disabledSave' class="btn">
          <Icon type="ios-checkmark" style="margin-right: 5px" />提交
        </Button>
        <Button type="primary" v-if="mode === 'edit'" :loading="btnLoading" @click="handleConfirm('edit')" :disabled='disabledSave' class="btn">
          <Icon type="ios-checkmark" style="margin-right: 5px" />保存修改
        </Button>
        <Button style="marginLeft: 20px" @click="back" class="btn">
          <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
        </Button>
      </div>
    </div>
    <Modal title="预览图片" width="30" v-model="viewModal" footer-hide>
      <div>
        <img :src="viewSrc" style="width: 100%" />
      </div>
    </Modal>
    <Modal
        v-model = "modalStatus"
        width='600'
        :closable='false'
        :mask-closable="false"
        footer-hide>
        <h3 style='text-align:center;font-weight:700;margin: 0 10px'>院内医生列表</h3>
        <div style="display: inline-block;margin: 10px 0 10px 10px;">
            <Input
              v-model.trim="ysmc"
              placeholder="请输入名称检索"
              style="width: 150px"
              clearable
            />
        </div>
        <div style="display: inline-block;margin: 10px 0 10px 10px;">
            <Button type="primary" icon="ios-search" @click="changeDoctor(1,ysmc)">查询</Button>
        </div>
        <div style="display: inline-block;margin: 10px 0 10px 10px;float:right">
            <Button type='primary' @click="getThirdpartyDoctor" :disabled='TBdisabled'>
                <Icon type="ios-checkmark" style="margin-right: 5px" />同步院内医生
            </Button>
        </div>
        <Spin v-if="showSpin" fix></Spin>
        <Table :loading="tableLoading" border stripe :columns="columns1" :data="doctorList" highlight-row ref="table" @on-current-change="handleRowChange"></Table>
        <Page
            :total="count"
            :current="pageNo"
            :pageSize="pageSize"
            style="margin-top:10px;text-align:center;"
            @on-change='pageChange'
        />
        <div style="text-align:center;margin:10px">
            <Button @click="goback" >
                <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i> 返回
            </Button>
        </div>
    </Modal>
  </div>
</template>
<script>
import api from "@/api/commonApi";
import code from "@/configs/base.js";
import cookie from "../../../../utils/cookie.js";
import fourLevelLinkage from "@/components/fourLevelLinkage";
import Utils from "@/utils";
import { DatePicker } from "view-design";
export default {
  components: {
    DatePicker,
    fourLevelLinkage
  },
  props: {
    mode: String,
    jgtype: [Number, String],
    hospitalId: [Number],
  },
  data() {
    return {
      TBdisabled: false,
      showSpin: false,
      noshow: false,
      province: null,
      city: null,
      area: null,
      provinceName: null,
      cityName: null,
      areaName: null,
      detfaltList: [],
      btnLoading: false,
      formValidate: {
        // 头像
        docIcon: "",
        // 姓名
        name: null,
        // 性别
        gender: null,
        // 联系方式
        phone: null,
        // 密码
        password: null,
        // 民族
        nation: null,
        // 身份证号
        idcard: null,
        // 从业年限
        // workingYears: null,
        // 关联医院
        hospitalId: null,
        // 住址
        address: null,
        // 籍贯
        nativePlace: null,
        // 最高学历
        highestEducation: null,
        // 毕业时间
        graduationTime: null,
        // 毕业学校
        graduateSchool: null,
        // 专业
        major: null,
        // 毕业证号
        graduationCard: null,
        // 学位
        degree: null,
        // 个人简介
        personalIntroduction: null,
        // 擅长疾病
        doctorGood: null,
        // 资质信息
        certList: [
          {
            code: "", //证书编号
            details1: null, // 发证日期
            details2: null, // 专业
            filePath: null,
            type: "1"
          },
          {
            code: null, //证书编号
            details1: null, // 发证日期
            filePath: null,
            type: "2"
          },
          {
            code: null, // 证书说明
            filePath: null,
            type: "3"
          }
        ],

        // 职称
        // titleType: null,
        // 科室
        deptType: null,
        departmentId: null,
        // his
        hiscode: null,
        type: this.type
        //医生擅长疾病
        // doctorGoodDisease: null
      },
      ruleValidate: {
        name: [{ required: true, message: "请输入姓名", trigger: "change" }],
        gender: [{ required: true, type: 'number', message: "请选择性别", trigger: "change" }],
        phone: [{ required: true, message: "请输入正确的联系方式", trigger: "change", pattern: Utils.pattern.phone}],
        // password: [
        //   { required: true, message: "长度至少为8个字符，并且至少包含以下3个字符：小写字母、大写字母、数字和特殊字符。"},
        //   { validator: this.validatePassword, trigger: 'blur' }
        // ],
        // idcard: [
        //   { required: true, message: "请输入正确的身份证号", trigger: "change", pattern: Utils.pattern.idCard }
        // ],
        departmentId: [{ required: true, message: "请选择科室", trigger: "change" }],
        hiscode: [{ required: true, message: "请输入HIS编码", trigger: "change" }],
        title: [{ required: true, message: "请选择职称", trigger: "change" }]
      },
      wyAccid: '', // 云信id;
      // 上传图片相关
      defaultList1: [],
      defaultList2: [],
      defaultList3: [],
      defaultListAvatar: [],
      uploadList: [],
      uploadModal: true,
      uploadData: { json: '{"urlCode":"' + code.urlCode.doctor + '"}' },
      uploadDataAvatar: {
        json: '{"urlCode":"' + code.urlCode.reviewAvatar + '"}',
      },
      uploadUrl: api.fileAll,
      images: "",
      sourceImages: "",
      imgName: "",
      visible: false,
      uploadListAvatar: [],
      uploadList1: [], //type1
      uploadList2: [], //type2
      uploadList3: [], //type3
      viewModal: false,
      viewSrc: null,
      /**
       * 下拉选项
       * **/
      departmentList: [],// 科室列表
      titleList: [], // 职称列表
      majorList: [], // 专业列表
      nationalityList: [], // 民族列表
      educationList: [], // 学历列表
      degreeList: [], // 学位列表
      pageSize: 10,
      pageNo: 1,
      count: 20,
      modalStatus: false,
      columns1:[
        {
            key: "sum",
            title: "排序",
            align: "center",
            width: 80
        },
        {
            key: "doccode",
            title: "HIS编码",
            align: "center",

        },
        {
            key: "docname",
            title: "医生名称",
            align: "center",

        },
        {
            key: "titlename",
            title: "医生职称",
            align: "center",

        },
      ],
      doctorList: [],
      id: sessionStorage.getItem("hospitalId"),
      orgCode: sessionStorage.getItem("orgCode"),
      ksdm:sessionStorage.getItem("ksdm"),
      disabledSave: false,
      identity:'',
      type: 1,
      roleName: '医生',
      roleTitle: '医生职称',
      hospitalList: [],
    };
  },
  created() {
    this.hospitalId = this.$route.query.hospitalId ? this.$route.query.hospitalId : null;
    this.jgtype = this.$route.query.jgtype
    this.type = this.$route.query.type ? this.$route.query.type : 1;
    if(this.type == 1) {
      this.roleName = '医生',
      this.roleTitle = '医生职称'
    } else if(this.type == 3) {
      this.roleName = '护士',
      this.roleTitle = '护士职称'
    } else if(this.type == 4) {
      this.roleName = '技师',
      this.roleTitle = '技师职称'
    }
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/maintain/indexManagement/index",
        title: "索引管理"
      },
      {
        path: "/index/maintain/doctorregister/list",
        title: "医生注册信息"
      }
    ];
    this.$emit("changeBreadList", breadList);

  },
  mounted() {
    this.identity = cookie.getCookie("idtt");
    if(this.identity ==5){
      this.provinceName = cookie.getCookie("provinceName");
      this.cityName = cookie.getCookie("cityName");
      this.areaName = cookie.getCookie("districtName");
      this.hospitalName = cookie.getCookie("orgName");
    }
    this.uploadList1 = this.$refs.upload1.fileList;
    this.uploadList2 = this.$refs.upload2.fileList;
    this.uploadList3 = this.$refs.upload3.fileList;
    this.uploadListAvatar = this.$refs.uploadAvatar.fileList;
    // 加载职称列表
    this.getTitleList();
    this.findDoctorDict();
    if (this.mode !== 'add') {
      this.findKbaoOperateDoctorDtoById();
    }
  },
  methods: {
    // 表单密码验证
    validatePassword(rule, value, callback) {  
      if (!value) {  
        callback();  
      }  
      if (value.length < 8) {  
        callback(new Error('密码至少需要8位.'));  
        return;  
      }  
      const hasLower = /[a-z]/.test(value);  
      const hasUpper = /[A-Z]/.test(value);  
      const hasNumber = /[0-9]/.test(value);  
      const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value);  
      let meetsCriteria = 0;  
      if (hasLower) meetsCriteria++;  
      if (hasUpper) meetsCriteria++;  
      if (hasNumber) meetsCriteria++;  
      if (hasSpecial) meetsCriteria++;  
      if (meetsCriteria < 3) {  
        callback(new Error('长度至少为8个字符，并且至少包含以下3个字符：小写字母、大写字母、数字和特殊字符。'));  
      } else {  
        callback();  
      }  
    }, 
    //获取院内医生列表
    changeDoctor(pageNo,ysmc){
      if(this.modalStatus == false){
        this.modalStatus = true
      }
      let params
      params= {
        // "params": {
        //     "ysmc_LIKE": ysmc,
        // },
        hospitalId: this.formValidate.hospitalId,
        orgCode: sessionStorage.getItem("orgCode"),
        searchKey: ysmc,
        depcode: this.formValidate.code,
        "pageNo": pageNo,
        "pageSize": this.pageSize
      }
      this.$axios
        .post(api.getThirdpartyDoctorList, params)
        .then(res => {
          if (res.data.success) {
            this.count = res.data.object.total;
            let ret = res.data.object.records;
            if(ret){
              ret.forEach((item,index) => {
                // 排序
                item.sum = this.addZeros(index)
              })
              this.doctorList = ret
            } else {
              this.doctorList = []
            }
          } else {
            // this.$Message.info("修改失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //同步院内医生列表
    getThirdpartyDoctor(){
      if(!this.formValidate.hospitalId) {
          this.$Message.error('请先选择医院');
          return;
      }
      if(!this.formValidate.code) {
          this.$Message.error('请先选择科室');
          return;
      }
      this.showSpin = true
      this.TBdisabled = true
      let params = {
        hospitalId: this.formValidate.hospitalId,
        orgCode: sessionStorage.getItem("orgCode"),
        depcode: this.formValidate.code
      }
      this.$axios
        .post(api.findThirdpartyDoctor, params)
        .then(res => {
          if (res.data.code == 1) {
            // let ret = res.data.object;
            // console.log('数据',ret);
            this.showSpin = false
            this.TBdisabled = false
            this.$Message.info("同步成功！");
            this.changeDoctor(1)
          } else {
            this.showSpin = false
            this.TBdisabled = false
            this.$Message.error(res.data.message);
          }
        })
        .catch(err => {
          this.showSpin = false
          this.TBdisabled = false
        });
    },
    //选择第三方科室code
    handleRowChange(currentRow, oldCurrentRow){
        console.log(currentRow)
        this.formValidate.hiscode = currentRow.doccode
        this.modalStatus = false
    },
    goback(){
      this.ysmc = ''
      this.pageNo = 1
      this.modalStatus = false
    },
    // 文件上传成功触发的函数
    handleSuccess(res, file, type) {
      res = this.uploadFileDecrypt(res);
      if (res.success) {
        file.res = res.object[0];
      } else {
        this.$Message.info("上传失败,请重试");
        return false;
      }
    },
    // 分页
    pageChange(index) {
      this.pageNo = index
        if (this.ysmc) {
            this.changeDoctor(index, this.ysmc);
        } else {
            this.changeDoctor(index);
        }
    },
    changeProvince(val) {
      this.province = val;
    },
    changeCity(val) {
      this.city = val;
    },
    changeArea(val) {
      this.area = val;
      // this.countyList = this.$store.getters.getAreaList(this.formValidate.cityCode);
    },
    changeHospital(val) {
      if (!val && val !== 0) {
        this.formValidate.hospitalId = null;
        this.departmentList = [];
        return;
      }
      this.formValidate.hospitalId = val;
      if (Boolean(val)) {
        this.getDepartmentList(val);
      }
    },
    back() {
      console.log(this.type)
      let pageNo = this.$route.query.pageNo;
      if(this.jgtype == 'jianguan'){
        this.$router.back(-1);
        // this.functionJS.queryNavgationTo(this, "/index/supervision/qualificationApply/add", {
        // });
      } else {
        if(this.type == 1) {
          this.functionJS.queryNavgationTo(this, "/index/doctorOperation/doctorregister/list", {
            pageNo
          });
        } else if(this.type == 3) {
          this.functionJS.queryNavgationTo(this, "/index/doctorOperation/doctorregister/nurselist", {
            pageNo
          });
        } else if(this.type == 4) {
          this.functionJS.queryNavgationTo(this, "/index/doctorOperation/doctorregister/technicianlist", {
            pageNo
          });
        }
      }
    },
    // 获取职称列表
    getTitleList() {
      // getTitle   获取全部职称接口
      this.$axios
        .post(api.findDoctorTitleListByDoctorType,{type: this.type})
        .then(resp => {
          this.titleList = resp.data.object;
        })
        .catch(err => {
          console.error(err);
        });
    },
    //获取字典值
    findDoctorDict() {
      this.$axios.post(api.findDoctorDict,{}).then(resp => {
        if (resp.data.code == 1) {
          const resObj = resp.data.object;
          this.nationalityList = resObj.nationalityList;
          this.educationList = resObj.educationList;
          this.degreeList = resObj.degreeList;
          if(this.type == 1) {
            this.majorList = resObj.doctormajorList;
          } else if(this.type == 3) {
            this.majorList = resObj.nursemajorList;
          } else if(this.type == 4) {
            this.majorList = resObj.technicianmajorList;
          }
        } else {
          this.$Message.error(resp.data.message);
        }
      }).catch(err => {
          console.error(err);
      });
    },
    // 通过选择医院加载医院下科室
    getDepartmentList(hospitalId) {
      let url = api.deptPageList;
      // let url = api.querydeptname;
      let params = {
        hospitalId,
        pageNo: 1,
        pageSize: 100000
      };
      this.packageAxios(this, url, params, res => {
        if (res.data.success) {
          let ret = res.data.object.records;
          for(let i = 0; i < res.data.object.records.length; i++){
            res.data.object.records[i].id = String(res.data.object.records[i].id)
          }
          this.departmentList = ret;
        } else {
          this.$Message.error("加载失败");
        }
      });
    },
    changedept() {
      this.departmentList.forEach(i =>{
        if(i.id == this.formValidate.departmentId){
            this.formValidate.deptName = i.dictName
            this.formValidate.departmentId = i.id
            this.formValidate.departmentName = i.deptNickname
            this.formValidate.deptType = i.dictType
            this.formValidate.code = i.code
        }
      })
    },
    preview(type) {
      if (type === "Avatar") {
        const check = this["uploadList" + type].length < 1;
        if (!check) {
          this.$Message.info("只能上传一张图片");
          return false;
        }
      }
    },
    onremove (type, file) {
        const fileList = this.$refs['upload' + type].fileList;
        this.$refs['upload' + type].fileList.splice(fileList.indexOf(file), 1);
        console.log(this.$refs['upload' + type].fileList)
    },
    // handleBeforeUpload() {
    //   const check = this.uploadList.length < 1;
    //   if (!check) {
    //     this.$Message.info("只能上传一张图片");
    //   }
    //   return check;
    // },
    getItemByType(type) {
      if(this.formValidate.certList){
            return this.formValidate.certList.filter((item) => item.type == type)[0];
        }else{
            this.formValidate.certList = [
                {
                    code: null, //证书编号
                    details1: null, // 发证日期
                    details2: null, // 专业
                    filePath: null,
                    type: "1",
                },
                {
                    code: null, //证书编号
                    details1: null, // 发证日期
                    filePath: null,
                    type: "2",
                },
                {
                    code: null, // 证书说明
                    filePath: null,
                    type: "3",
                },
            ]
            return this.formValidate.certList.filter((item) => item.type == type)[0];
        }
    },
    getItemIndexByType(type) {
      if(this.formValidate.certList){
            var resIndex;
            this.formValidate.certList.forEach((item, index) => {
                if (item.type == type) {
                resIndex = index;
                }
            });
             return resIndex;
        }
    },
    // 上传图片大小错误提醒
    handleMaxSize() {
      this.$Message.error("上传图片大小不能超过200kb");
    },
    uploadFormatErrorAvatar() {
      this.$Message.error("上传图片类型只能是jpg/jpeg/png格式");
    },
    // 查看预览图片
    handleView(item) {
      this.viewModal = true;
      this.viewSrc = this.fileBaseUrl + item.res.fileName;
    },
    //查看医生详情
    findKbaoOperateDoctorDtoById() {
      let url;
      if (this.jgtype == 'jianguan') {
        url = api.findOperateSuperviseDoctorById
      } else if (this.jgtype != 'jianguan') {
        url = api.findKbaoOperateDoctorDtoById;
      }
      // this.showSpin = true;
      this.$axios.post(url, {id: this.$route.query.id}).then(res => {
        if (res.data.code === 1) {
           // 利用返回数据填充 前端数据
          const resObj = JSON.parse(JSON.stringify(res.data.object));
          //对 resObj.certlist 进行 this.formValidate.certListmerge 进行merge 以兼容旧数据;
          if(resObj.certList){
            this.formValidate.certList.forEach((item, index) => {
              resObj.certList[index] = Object.assign(
                {},
                item,
                resObj.certList[index] || {})
            })
            resObj.certList.forEach((item, index) => {
              if (item.filePath) {
                item.filePath = JSON.parse(item.filePath);
                  if (!Array.isArray(item.filePath)) {
                    item.filePath = [item.filePath];
                  }
                  item.filePath.forEach((item2, index) => {
                    this.$refs['upload' + item.type].fileList.push({
                      status: "finished",
                      url: item2.fileName,
                      res: item2,
                      uid: index
                    });
                  });
              }
            });
          } else {
                this.formValidate.certList = this.certList
          }
          // 头像
          try {
            if (resObj.docIcon) {
              const iconInfo = JSON.parse(resObj.docIcon);
              this.$refs.uploadAvatar.fileList.push({
                status: "finished",
                url: iconInfo.fileName,
                res: iconInfo,
                uid: 0,
              });
            }
          } catch (err) {
            this.$Message.error("头像解析错误");
          }
          // 预留返回的有字段数据
          this.province = String(resObj.province);
          this.city = String(resObj.cityCode);
          this.area = String(resObj.areaCode);
          this.hospitalName = String(resObj.hospitalName);
          // 字段错误纠正（与提交数据字段不对应等问题）
          resObj.deptType = resObj.deptTypeId;
          resObj.departmentId = resObj.departmentId;
          this.wyAccid = resObj.wyAccid;
          // 删除多余字段 使其与要提交字段保持一直
          for (let i in resObj) {
            if (!this.formValidate.hasOwnProperty(i)) {
              delete resObj[i]
            }
          }
          this.formValidate = res.data.object;
          // 必须克隆certList否则提交的时候无法序列化
          // this.formValidate.certList = JSON.parse(JSON.stringify(this.formValidate.certList));
          if (this.formValidate.hospitalId && this.mode !== 'add') {
            this.getDepartmentList(this.formValidate.hospitalId);
          }
        } else {
          this.$Message.error(res.data.message);
        }
        this.showSpin = false;
      });
    },
  //保存医生
    handleConfirm(savetype) {
      this.disabledSave = true
      this.$refs['formValidate'].validate(valid => {
        if (valid) {
          let url = api.insertdoctor;
          if(this.jgtype == 'jianguan' && savetype === 'add'){
            this.formValidate.hospitalId = this.hospitalId
            url = api.insertSuperviseDoctor
          } else if (this.jgtype != 'jianguan' && savetype === 'add') {
            url = api.insertdoctor
          } else if (this.jgtype == 'jianguan' && savetype === 'edit') {
            url = api.insertSuperviseDoctor
            this.formValidate.id = this.$route.query.id;
          } else if (this.jgtype != 'jianguan' && savetype === 'edit') {
            url = api.updateKbadDoctor;
            this.formValidate.id = this.$route.query.id;
          }
          if(this.formValidate.certList){
            // 上传地址字段内容填充
            this.formValidate.certList.forEach((item, index) => {
              if (item.type == '3') {
                item.filePath = this['uploadList' + item.type].map((item) => item.res)
              } else {
                item.filePath = this['uploadList' + item.type].map((item) => item.res);
                item.details1 = Utils.getNowDateBySpecialFormat(item.details1);
              }
            });
          }
          this.titleList.forEach(i =>{
            if(i.dictType == this.formValidate.title){
                this.formValidate.titleName = i.dictName
            }
          })
          this.formValidate.docIcon = this.uploadListAvatar.map(
            (item) => item.res
          )[0]
            ? JSON.stringify(this.uploadListAvatar.map((item) => item.res)[0])
            : "";
          // 数据类型转换
          this.formValidate.graduationTime = Utils.getNowDateBySpecialFormat(this.formValidate.graduationTime);
          this.formValidate.hospitalid = this.formValidate.hospitalId;
          this.formValidate.type = this.type;
          this.btnLoading = true;
          this.$axios.post(url, this.formValidate).then(res => {
            if (res.data.success) {
              savetype === 'add' && this.$Message.success("添加成功");
              savetype === 'edit' && this.$Message.success("保存成功");
              this.disabledSave = false
              this.back();
            } else {
              this.$Message.error(res.data.message);
              this.disabledSave = false
            }
            this.btnLoading = false;
          }).catch(() => {
            this.btnLoading = false;
            this.disabledSave = false
          });
        } else {
          this.$Message.error("请完整填写必填项!");
          this.disabledSave = false
        }
      });
    },
    // 上传图片格式错误提醒
    uploadFormatError() {
      this.$Message.error("上传图片类型只能是jpg格式");
    },
  },
  watch: {
    province(n) {
      console.log('province', n)
    },
    city(n) {
      console.log('city', n)
    },
    area(n) {
      console.log('area', n)
    },
    'formValidate.hospitalId'(n) {
      console.log('hospitalId', n)
    }
  }
};
</script>
<style lang="less" scoped>
.addDoctor {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  font-size: 14px;
  /deep/ .ivu-form .ivu-form-item-label {
    padding-right: 0px;
  }
  .hongdian{
    margin-left:-10px
  }
  .left-part {
    width: 98%;
    margin: 20px auto;
    margin-left: 1%;
    margin-bottom: 20px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 20px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;
    }
  }
  .right-part {
    width: 98%;
    margin-left: 1%;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    padding-bottom: 20px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 10px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;
      .tishi {
        color: #FF9966;
        font-size: 14px;
        margin-left:35px;
      }
    }
    .box-border {
      border: 1px solid #ccc;
      padding: 10px 5px;
    }
  }
  .baseInfo-lineOne {
    height: 60px;
    padding-bottom: 10px;
  }
}
.btn-group {
    padding: 20px 0;
    text-align: center;
    .btn {
      height: 35px;
    }
}
.upload-wrapper {
  display: flex;
  align-items: center;
  clear: both;
  label {
    text-align: right;
    padding: 10px 0px 10px 0;
  }
  .upload-part {
    display: flex;
    position: relative;
    align-items: center;
    flex-wrap:wrap;
    .demo-upload-list {
      display: inline-block;
      width: 90px;
      height: 90px;
      text-align: center;
      line-height: 90px;
      border: 1px solid transparent;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
      margin-right: 4px;
    }
    // 关闭input文本框自动填充背景色黄色
    input:-webkit-autofill {
      box-shadow: 0 0 0px 1000px white inset !important;
    }

    .demo-upload-list img {
      width: 100%;
      height: 100%;
    }
    .demo-upload-list-cover {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
    .demo-upload-list-cover i {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      margin: 0 2px;
    }
  }
}
</style>

